<template>
  <div>
    <el-form
        :inline="true"
        :model="searchParams"
        class="formInline"
        size="small"
    >
      <el-form-item label="操作时间">
        <el-date-picker
            v-model="date1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择操作时间"
            default-time="00:00:00"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
            v-model="date2"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="23:59:59"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="执行状态">
        <el-select v-model="searchParams.select1" placeholder="请选择">
          <el-option label="成功" value="01"></el-option>
          <el-option label="失败" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人">
        <el-input
            class="inputClass"
            v-model="searchParams.input1"
            placeholder="操作人"
            :maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 4px;">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onResize">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <tableList
          :showIndex="true"
          border
          ref="tableRef"
          :heightMin="155"
          :keySet="keySet"
          :autoHeight="true"
          :tableData="tableData1"
          :paginationShow="true"
          :pageNumber="pages.current"
          :pageSize="pages.size"
          :total="pages.total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
      >
        <template #operateStatus="{row}">
          <div>
            {{ row.operateStatus }}
          </div>
        </template>
        <template #id="row">
          <!-- <span class="worldBlueBtn" @click="handDialog(row)">
            查看
          </span> -->
          <div v-if="row.row.operateStatus == '成功'" @click="handDialog(row)" class="worldBlueBtn">查看</div>
          <div v-else >
            <!-- {{row.row.operateMsg}} -->
            <popCom :content="row.row.operateMsg"/>
          </div>
        </template>
      </tableList>
    </div>
    <vxe-modal
        v-model="listDialog"
        class="dialogClass"
        title="历史记录"
        width="900"
        min-width="900"
        resize
        remember
        fullscreen
    >
      <tableList
          :showIndex="true"
          border
          auto-height
          :keySet="keySet2"
          :tableData="tableData2"
          :paginationShow="true"
          :pageNumber="ListPage.current"
          :pageSize="ListPage.size"
          :total="ListPage.total"
          @handleSizeChange="handlePageSizeChange"
          @handleCurrentChange="handlePageCurrentChange"
      >
        <template #sfkycekp="{row}">
          <el-tag v-if="row.sfkycekp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
        <template #cekpsfkykzp="{row}">
          <el-tag v-if="row.cekpsfkykzp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
        <template #qekpsfkykzp="{row}">
          <el-tag v-if="row.qekpsfkykzp == 'Y' " type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </tableList>
    </vxe-modal>
  </div>
</template>

<script>

import TableList from "@/components/tableList/index.vue";
import mixinTable from "@/mixin/mtable";
import {getHistoryPage, getListData} from "@/api/differentialTaxCode";
import popCom from "@/components/popCom.vue"

export default {
  components: {TableList,popCom},
  mixins: [mixinTable],
  computed: {
    dateWidth() {
      return this.$store.state.viewWidth > 1200
    }
  },
  data() {
    return {
      visible: false,
      date1: "",
      date2: "",
      keySet: [

        {
          label: '操作时间',
          englishName: 'createTime',
          width: '180'
        },
        {
          label: '执行状态',
          englishName: 'operateStatus',
          isSlot: true,
          slotName: 'operateStatus'
        },
        {
          label: '总数量',
          englishName: 'logCount'
        },
        {
          label: '执行结果',
          englishName: 'id',
          isSlot: true,
          slotName: 'id',
          showOverflowTooltip:false,
        },
        {
          label: '操作人',
          englishName: 'createUsername'
        }
      ],
      tableData1: [],
      listDialog: false,
      keySet2: [
        {
          label: '商品和服务税收分类合并编码',
          englishName: 'sphfwssflhbbm',
          width: 180
        },
        {
          label: '商品和服务名称',
          englishName: 'sphfwmc',
          width: 400
        },
        {
          label: '商品和服务分类简称',
          englishName: 'sphfwfljc',
          width: 150
        },
        {
          label: '是否可以差额开票',
          englishName: 'sfkycekp',
          isSlot: true,
          slotName: 'sfkycekp',
          align: 'center',
          width: 140
        },
        {
          label: '差额开票是否可以开专票',
          englishName: 'cekpsfkykzp',
          width: 160,
          isSlot: true,
          slotName: 'cekpsfkykzp',
          align: 'center'
        },
        {
          label: '全额开票是否可以开专票',
          englishName: 'qekpsfkykzp',
          width: 160,
          isSlot: true,
          slotName: 'qekpsfkykzp',
          align: 'center'
        },
        {
          label: '一般纳税人税率',
          englishName: 'ybnsrsl',
          align: 'center',
          width: 150
        },
        {
          label: '一般纳税人征收率',
          englishName: 'ybnsrzsl',
          align: 'center',
          width: 150
        },
        {
          label: '小规模纳税人征收率',
          englishName: 'xgmnsrzsl',
          align: 'center',
          width: 150
        }
      ],
      tableData2: [],
      ListPage: {
        current: 1,
        size: 10,
        total: 0
      },
      listId: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // failFn(row) {
    //   this.$confirm(row.operateMsg, '错误原因', {
    //     showCancelButton: false,
    //     confirmButtonText: '确认'
    //   }).then(data => {

    //   }, err => {
    //   })
    // },
    close() {
      this.visible = false
    },
    onSubmit() {
      this.pages.current = 1;
      this.getList()
    },
    async getList() {
      let param = {
        pageNo: this.pages.current,
        pageSize: this.pages.size,
        createTime: [this.date1, this.date2],
        operateStatus: this.searchParams.select1,
        createUsername: this.searchParams.input1
      }
      const {code, msg, data} = await getHistoryPage(param);
      if (code == 200) {
        this.tableData1 = data.records;
        this.pages.total = data.total;
        this.pages.current = data.current;
        this.pages.size = data.size;
      }
    },
    onResize() {
      this.searchParams = {
        createUsername: '',
        statusCode: ''
      };
      this.date1 = '';
      this.date2 = '';
      this.getList()
    },
    handDialog(row) {
      // if (row.row.operateStatus == '失败') {
      //   return this.failFn(row.row)
      // }
      this.listDialog = true
      this.listId = row.row.id
      this.getData()
    },
    async getData() {
      let param = {
        id: this.listId,
        pageNo: this.ListPage.current,
        pageSize: this.ListPage.size,
      }
      const {code, msg, data} = await getListData(param);
      if (code == 200) {
        this.tableData2 = data.records;
        this.ListPage.total = data.total;
        this.ListPage.current = data.current;
        this.ListPage.size = data.size;
      }
    },
    handlePageSizeChange(val) {
      this.ListPage.size = val;
      this.getData()
    },
    handlePageCurrentChange(val) {
      this.ListPage.current = val;
      this.getData()
    },
  }
}

</script>

<style scoped lang="scss">
.gt1200 {
  ::v-deep .el-date-editor--datetimerange.el-input__inner {
    width: 100%;
    max-width: 600px;
  }
}

.lt1200 {
  ::v-deep .el-input.el-date-editor--daterange, .el-input__inner.el-date-editor--daterange, .el-input.el-date-editor--timerange, .el-input__inner.el-date-editor--timerange {
    width: 100%;
  }
}

.getHistory {
  width: 100%;
  height: 100%;

  .dialogClass {
    ::v-deep .vxe-modal--box {
      width: 800px;
    }

    .cardWrap {
      margin-bottom: 20px;
    }

    // .qiyeContent {
    .qiyeC {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 20px 10px 0;

      span:last-child {
        line-height: 0;
      }
    }

    // margin: 0 20px 10px 0;
    &:last-child {
      margin: 0 0px 10px 0;
    }

    .colorGray {
      color: #909399;
    }

    // }
  }

  .nsrjbxxhqjlxq ::v-deep .vxe-modal--body {
    min-height: 450px;
    max-height: 450px;
    overflow: auto;
  }
}
</style>